<template>
  <a-sub-menu v-if="hasSubMenu" :key="menu.name" :class="[menuLevelClass[props.menuLevel]]">
    <template #icon v-if="menu.iconDisplay">
      <aside-menu-icon :icon="getSubMenuIcon(menu)" class="icon-style" />
    </template>
    <template #title>{{ menu.title }}</template>
    <aside-sub-menu
      v-for="item in menu.children"
      :key="item.name"
      :menu="item"
      :menuLevel="props.menuLevel + 1"
      :openKeys="openKeys"
      :selectedKeys="selectedKeys"
    />
  </a-sub-menu>
  <a-menu-item v-else :key="menu.name" :class="[menuLevelClass[props.menuLevel]]">
    <template #icon v-if="menu.iconDisplay">
      <aside-menu-icon :icon="getMenuIcon(menu)" class="icon-style" />
    </template>
    <span>{{ menu.title }}</span>
  </a-menu-item>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { AsideMenuIcon } from './AsideMenuIcon'

  const props = defineProps<{
    menu: any
    menuLevel: number
    // 展开的key
    openKeys: Array<string>
    // 默认选中
    selectedKeys: Array<string>
  }>()

  const hasSubMenu = computed(() => {
    return props.menu.children && props.menu.children.length > 0
  })
  const menuLevelClass = ['al_menu_item_first', 'al_menu_item_second', 'al_menu_item_three', 'al_menu_item_four']
  const isActive = computed(() => {
    return props.selectedKeys?.includes(props.menu.name)
  })
  const isOpen = computed(() => {
    return props.openKeys?.includes(props.menu.name)
  })
  const getSubMenuIcon = menuItem => {
    return isOpen.value ? menuItem.selectedIcon : menuItem.icon
  }
  const getMenuIcon = menuItem => {
    return isActive.value ? menuItem.selectedIcon : menuItem.icon
  }
</script>
<style scoped>
  .icon-style {
    width: 14px;
    display: inline-flex;
    height: 14px;
  }
</style>
